<template>
  <div class="coupon_list">
    <van-pull-refresh v-model="refreshing" @refresh="OnRefresh">
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="OnLoad"
      >
        <div class="list">
          <div class="coupon_item" v-for="(item, index) in list" :key="item.id">
            <div class="item_content">
              <router-link
                :to="{ path: '/coupon/info', query: { cid: item.id } }"
              >
                <div class="left">{{ item.rate * 100 }}<span>折</span></div>
                <div class="right">
                  <div>{{ item.title }}</div>
                  <div>活动开始时间：{{ item.createtime_date }}</div>
                  <div>活动结束时间：{{ item.endtime_date }}</div>
                  <div>剩余数量：{{ item.total }} 张 每人限领1张</div>
                </div>
              </router-link>
            </div>
            <div class="item_btn">
              <van-button
                type="primary"
                class="right_btn"
                v-if="item.receive"
                @click="OnReceive(item.id, index)"
                >领取</van-button
              >
              <van-button type="danger" disabled class="right_btn" v-else
                >已领取</van-button
              >
            </div>
          </div>

          <van-back-top :bottom="'80'" />
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script setup>
// this代理
const { proxy } = getCurrentInstance();
// 用户数据
const business = proxy.$business;
// 存放数据
const list = ref([]);
// 刷新状态
const refreshing = ref(false);
// 懒加载状态
const loading = ref(false);
// 上拉加载状态
const finished = ref(false);
// 当前页
const page = ref(1);

// 预加载钩子
onBeforeMount(() => OnRefresh());

// 下拉刷新回调函数
const OnRefresh = () => {
  page.value = 1;
  list.value = [];
  finished.value = false;
  loading.value = true;
  refreshing.value = true;

  setTimeout(OnLoad, 1000);
};

// 上拉加载回调函数
const OnLoad = async () => {
  // 如果是下拉刷新，重置其值
  if (refreshing.value === true) {
    refreshing.value = false;
  }
  // 组装参数
  let params = {
    page: page.value,
    busid: business.value.id,
  };
  // 发起请求
  let result = await proxy.$http.post({
    url: "/coupon/index",
    params,
  });
  // 处理请求结果
  if (result.code === 1) {
    // 获取数据总数
    let count = result.data ? result.data.count : 0;
    // 获取数据并且合并数组
    list.value = result.data ? list.value.concat(result.data.list) : [];
    // 判断是否加载完所有数据
    if (list.value.length >= count) {
      // 完成加载
      finished.value = true;
      return false;
    }
    // 分页+1
    page.value = page.value + 1;
  } else {
    finished.value = true;
  }
};

// 领取优惠券
const OnReceive = (cid, index) => {
  // 未登录
  if (business.value.hasOwnProperty("id") === false) {
    proxy
      .$confirm({
        title: "请先登录",
        message: "是否确认跳转到登录页？",
      })
      .then(() => {
        proxy.$cookies.set("redirect", true);
        proxy.$router.push("/business/login");
      })
      .catch(() => {});
    return;
  }
  // 领取优惠券确认框
  proxy
    .$confirm({
      title: "领取优惠券",
      message: "是否确认领取优惠券？",
    })
    .then(async () => {
      // 组装参数
      let params = {
        cid,
        busid: business.value.id,
      };
      // 发起请求
      let result = await proxy.$http.post({
        url: "/coupon/receive",
        params,
      });
      // 处理请求结果
      if (result.code === 1) {
        proxy.$success({
          message: result.msg,
          onClose: () => {
            // 无刷新将其状态设置为已领取
            list.value[index].receive = false;
          },
        });
      } else {
        proxy.$fail(result.msg);
      }
    })
    .catch(() => {});
};
</script>

<style scoped>
@import url("/assets/css/CouponIndex.css");
</style>